import React, { FC, useEffect } from "react";
import styles from './Login.module.scss'
import { UserAddOutlined } from "@ant-design/icons";
import { Button, Form, Input, Space, Typography,Checkbox, message } from "antd";
import { REGISTER_PATHNAME,MANAGE_INDEX_PATHNAME } from "../router";
import { Link,useNavigate } from "react-router-dom";
import { login } from "../utils/api";
import { useRequest } from "ahooks";
import { setToken } from "../storage/userToken";
const { Title } = Typography

const USERNAME_KEY = 'username'
const PASSWORD_KEY = 'password'

const rememberUser = (username:string,password:string) => {
    localStorage.setItem(USERNAME_KEY, username)
    localStorage.setItem(PASSWORD_KEY, password)
}
const removeLocalStorage = () => {
    localStorage.removeItem(USERNAME_KEY)
    localStorage.removeItem(PASSWORD_KEY)
}
const getLocalStorage = () => {
    return {
        username: localStorage.getItem(USERNAME_KEY),
        password: localStorage.getItem(PASSWORD_KEY)
    }
}


const Login: FC = () => {
    const nav=useNavigate()
    const { run: loginHandle } = useRequest(async (val) => {
        const { username, password } = val
        return login(username,password)
    }, {
        manual: true,
        onSuccess(res) {
            const {token=''}=res
            setToken(token)
            message.success('登陆成功')
            nav(MANAGE_INDEX_PATHNAME)
        }
    })
    const [form]=Form.useForm()
    useEffect(() => {
        const { username, password } = getLocalStorage()
        form.setFieldsValue({username,password})
    }, [])
    const onFinish = (values: any) => {        
        const { username, password, remember } = values || {}
        if (remember) {
            rememberUser(username,password)
        } else {
            removeLocalStorage()
        }
        loginHandle(values)
    }
    return <div className={styles.container}>
    <Space>
    <Title level={2}><UserAddOutlined/></Title>
    <Title level={2}>登录</Title>
    </Space>
    <Form 
        labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            form={form}
    >
            <Form.Item label='用户名' name='username'
                rules={[{ required: true, message: "请输入用户名" },
                    { type: 'string', min: 5, max: 20, message: "用户名长度在5-20之间" },
                {pattern:/^\w+$/,message:'只能是字母数字下划线'}
            ]}
            >
            <Input/>
        </Form.Item>
            <Form.Item label='密码' name='password'
            rules={[{ required: true, message: "请输入密码" },
        ]}
            >
            <Input.Password/>
            </Form.Item>
            <Form.Item  name='remember' valuePropName="checked" wrapperCol={{offset:6,span:16}}>
            <Checkbox>记住我</Checkbox>
        </Form.Item>
        <Form.Item wrapperCol={{offset:6,span:16}}>
                <Space>
                    <Button type="primary" htmlType="submit">登录</Button>
                    <Link to={REGISTER_PATHNAME}>暂无账号,注册</Link>
            </Space>
        </Form.Item>
</Form>
</div>
}
export default Login